<template>
  <div class="h-full">
    <div class="h-full flex">
      <Sider breakpoint="md" collapsible :collapsed-width="0">
        <Menu active-name="1-1" theme="dark" width="auto">
          <MenuItem :name="`${menuList.order}`" v-for="menuList in sider" :key="`${menuList.order}`">
            <Icon type="ios-navigate"></Icon>
            <router-link :to="{name:`${menuList.pathName}`}">{{ menuList.name }}</router-link>
          </MenuItem>
        </Menu>
        <div slot="trigger"></div>
      </Sider>
      <div class="w-full h-full">
        <div class="user_search grid grid-cols-4 m-4">
          <div><Input v-model="projectId" class="w-2/3" placeholder="请输入项目号" style="width: 100px;"></Input></div>
          <div><Input v-model="projectName" class="w-2/3" placeholder="请输入项目名" style="width: 100px;"></Input>
          </div>
          <div>
            <Button @click="search" type="primary">搜索</Button>
            <Button @click="()=>{addModal=true}" type="info">添加</Button>
          </div>
        </div>
        <my-table class="m-3" v-if="listData" :listColumns="listColumns" :listData="listData"/>
      </div>
      <Modal
          v-model="showModal"
          title="项目详情"
          @on-ok=" ()=>{showModal=false}"
          @on-cancel="()=>{showModal=false}">
        <div v-if="showData" class="space-y-3">
          <div v-for="(item,idx) in Object.keys(showData)" :key="idx">
            <div v-if="mapping[item]!==undefined" class="p-3 bg-white shadow rounded-lg">
              <h3 class="text-xs border-b">
                {{ mapping[item] }}
              </h3>
              <p class="font-sans">
                {{ showData[item] }}
              </p>
            </div>
          </div>
        </div>
      </Modal>
      <Modal
          v-model="updateShowModal"
          title="修改详情"
          @on-ok=" ()=>{updateProject()}"
          @on-cancel="()=>{updateShowModal=false}">
        <div v-if="updateShowData" class="space-y-3">
          <div v-for="(item,idx) in Object.keys(updateShowData)" :key="idx">
            <div v-if="mapping[item]!==undefined" class="p-3 bg-white shadow rounded-lg">
              <h3 class="text-xs border-b">
                {{ mapping[item] }}
              </h3>
              <p class="font-sans">
                <Input v-if="item!=='createdTime' && item !== 'endTime'&&item !== 'projectNum' "
                       v-model="updateShowData[item]"/>
                <Input v-else-if="item==='projectNum'" v-model="updateShowData[item]" disabled/>
                <DatePicker v-else v-model="updateShowData[item]"/>
              </p>
            </div>
          </div>
        </div>
      </Modal>
      <Modal
          v-model="addModal"
          title="项目增加详情"
          @on-ok=" ()=>{addProject()}"
          @on-cancel="()=>{addModal=false}">
        <div class="space-y-3">
          <div v-for="(item,idx) in addData" :key="idx+2323" class="p-3 bg-white shadow rounded-lg">
            <h3 class="text-xs border-b">
              {{ item.name }}
            </h3>
            <p class="font-sans">
              <Input v-if="item.name !== '创建时间' && item.name !== '结束时间'" v-model="item.value" />
              <DatePicker v-else v-model="item.value" />
            </p>
          </div>
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import MyTable from "@/components/Mytable.vue";
import {deleteProject, getDept, getProject, getProjectInfo, updateProject} from "@/api/project/project";
import dayjs from 'dayjs';
import {api} from "@/boot/axios";

export default {
  name: 'projectManagement',
  components: {
    MyTable
  },
  data() {
    return {
      addModal: false,
      addData: {
        projectNum: {
          name: '项目号',
          value: ''
        },
        name: {
          name: '项目名',
          value: ''
        },
        status: {
          name: '状态',
          value: ''
        },
        createdTime: {
          name: '创建时间',
          value: ''
        },
        endTime: {
          name: '结束时间',
          value: ''
        },
        code: {
          name: '项目等级',
          value: ''
        }
      },
      showModal: false,
      showData: null,
      updateShowModal: false,
      updateShowData: null,
      mapping: {
        "projectNum": "项目号",
        "name": "项目名",
        "status": "状态",
        "createdTime": "创建时间",
        "endTime": "结束时间",
        "code": "项目等级"
      },
      sider: [
        {name: '项目', pathName: 'project', order: '1-1'}
      ],
      projectId: null,
      projectName: null,
      listData: [],
      listColumns: [
        {title: '项目号', key: 'projectNum'},
        {title: '项目名', key: 'name'},
        {title: '状态', key: 'status'},
        {title: '创建时间', key: 'createdTime'},
        {title: '结束时间', key: 'endTime'},
        {
          title: '操作', key: 'user_id',
          render: (h, param) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'

                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.check(param)
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.updateShowData = JSON.parse(JSON.stringify(param.row))
                    this.updateShowModal = true


                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.deleteProject(param)
                  }
                }
              }, '删除'),
            ])
          }
        }
      ],
      dept: {}
    }
  },
  created() {
    getDept().then(res => {
      let data = res.data
      let tmp = data.data
      // convert to dict
      for (let i = 0; i < tmp.length; i++) {
        this.dept[tmp[i].dept_id] = tmp[i].name
      }
    }).then(() => {
      getProject(null).then(res => {
        let data = res.data
        if (data.code === 200) {
          this.listData = data.data
          this.listData.filter(item => {
            item.createdTime = dayjs(item.createdTime).format('YYYY-MM-DD')
            item.endTime = dayjs(item.endTime).format('YYYY-MM-DD')
            item.deptName = this.dept[item.dept_id]
          })
        } else {
          this.$Message.error(data.msg)
        }
      })
    })
  },
  methods: {
    addProject(){
      let formData = new FormData()
      formData.append('projectNum', this.addData.projectNum.value)
      formData.append('name', this.addData.name.value)
      formData.append('status', this.addData.status.value)
      formData.append('createdTime', dayjs(this.addData.createdTime.value).format('YYYY-MM-DD'))
      formData.append('endTime', dayjs(this.addData.endTime.value).format('YYYY-MM-DD'))
      formData.append('code', this.addData.code.value)
      api.post('/project/add',formData).then(res=>{
        let data = res.data
        if (data.code === 200) {
          this.$Message.success('添加成功')
          this.addModal = false
          this.addData = {
            projectNum: '',
            name: '',
            status: '',
            createdTime: '',
            endTime: '',
            code: ''
          }
          this.$router.go(0)
        } else {
          this.$Message.error(data.msg)
        }
      })
    },
    search: function () {
      let projectId = this.projectId
      let projectName = this.projectName
      let formData = new FormData()
      // check projectId
      if (projectId !== null && projectId !== '') {
        formData.append('project_id', +projectId)
      }
      // check projectName
      if (projectName !== null && projectName !== '') {
        formData.append('name', projectName)
      }
      getProject(formData).then(res => {
        let data = res.data
        if (data.code === 200) {
          this.listData = data.data
          this.listData.filter(item => {
            item.createdTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
            item.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
          })
        } else {
          this.$Message.error(data.msg)
        }
      })
    },
    check: function (param) {
      this.showData = param.row
      let project_id = param.row.id
      getProjectInfo(project_id).then(res => {
        this.mapping['number'] = "人数"
        this.showData['number'] = res.data.data.length
      }).then(() => {
        api.get('/project_user/getuserdetail?' + new URLSearchParams({project_id: param.row.projectNum})).then(res => {
          this.mapping['users'] = "项目成员"
          this.showData['users'] = res.data.data.map(item => item.name).join(',')
        }).then(() => {
          this.showModal = true
        })

      })

    },
    deleteProject: function (param) {
      let projectId = param.row.projectNum
      deleteProject(projectId).then(res => {
        let data = res.data
        if (data.code === 200) {
          this.$Message.success("删除成功")
          this.search()
        } else {
          this.$Message.error("删除失败")
        }
      })
    },
    updateProject: function () {

      let formData = new FormData()
      formData.append('project_id', this.updateShowData.projectNum)
      formData.append('name', this.updateShowData.name)
      formData.append('status', this.updateShowData.status)
      formData.append('createdTime', dayjs(this.updateShowData.createdTime).format('YYYY-MM-DD HH:mm:ss'))
      formData.append('endTime', dayjs(this.updateShowData.endTime).format('YYYY-MM-DD HH:mm:ss'))
      formData.append('code', this.updateShowData.code)
      updateProject(formData).then(res => {
        let data = res.data
        if (data.code === 200) {
          this.$Message.success("修改成功")
          this.search()
        } else {
          this.$Message.error("修改失败")
        }
      }).then(() => {
        this.updateShowModal = false
        this.$router.go(0)
      })
    }
  }
}
</script>
<style scoped></style>